<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JS DOM</title>
</head>

<body>
    <div id="box1">这是一个ID选择器标签</div>
    <div class="box2">这是一个类选择器标签</div>
    <div>普通的div标签</div>
    <button>点击按钮</button>

    <script>
        let element_id = document.getElementById('box1');
        console.log(element_id);

        let element_class = document.getElementsByClassName('box2')[0];
        console.log(element_class);

        let element_tag = document.getElementsByTagName('div')[2];
        console.log(element_tag);

        // innerHTML 不仅会返回一个纯文本，
        // 还可以解析文本中的语意，更新元素的内容
        element_id.innerHTML = '修改ID选择器标签文本内容';
        // element_id.innerHTML = '<a href="#">跳转链接</a>';
        // 变成了跳转链接，
        // 而innerText 则不会解析文本中的语意，只会当作纯文本处理
        element_class.innerText = '修改后的类选择器标签文本';

        element_tag.style.color = 'red';
        element_tag.style.fontSize = '20px';

        // DOM 属性绑定事件
        let button_element = document.getElementsByTagName('button')[0];
        console.log(button_element);

        // 第一种方式：直接赋值一个函数给 onclick 属性
        button_element.onclick = function () {
            // 此处的function是匿名函数（没有函数名的函数）
            // 因为不需要在其他地方调用，所以用简单的匿名函数即可
            alert('DOM 属性按键触发');
        }
        // 第二种方式：使用 addEventListener 方法绑定事件
        button_element.addEventListener('click', function () {
            // 此方法需要传递两个参数，
            // 第一个参数是事件类型，第二个参数是事件处理程序
            alert('addEventListener 按键触发');
        });
        // 不需要完全使用匿名函数，也可以使用命名函数
        button_element.addEventListener('click', button_click_event);
        function button_click_event() {
            alert('命名函数按键触发');
        }
    </script>
</body>

</html>